<template>
	<div id="forgotpassword">
	<!--中间的容器盒子-->
	<div class="login_box"> 
	  <!--顶部图片的div容器-->
	  <div class="img_box">
	    <img src="@/assets/num1.png" alt="" />
	  </div>
	<h3 class="a">忘记密码</h3>
	  <!--登录表单-->
	  <el-form ref="loginFormRef" :rules="loginFormRules" :model="loginForm" label-width="0px" 
	    class="loginForm_box">
		<el-form-item label="手机号:" label-width="100px" prop="userPhone">
		  <el-input  v-model="loginForm.userPhone" ></el-input>
		</el-form-item>
	    
	    <el-form-item label="用户账号:" label-width="100px" prop="userAccount">
	      <el-input  v-model="loginForm.userAccount" ></el-input>
	    </el-form-item>
		<el-form-item label="原密码:" label-width="100px" prop="userPassword">
		  <el-input type="password" v-model="loginForm.userPassword" ></el-input>
		</el-form-item>
		<el-form-item label="新密码:" label-width="100px" prop="checkPass">
		  <el-input type="password" v-model="loginForm.checkPass" ></el-input>
		</el-form-item>
	    <el-form-item class="btns" >
		  <el-button type="success" @click="forgotpassword('loginFormRef')">确认</el-button>
		  <el-button @click="resetForm('loginForm')" class="edit">重置</el-button>
		  <el-button type="primary" @click="cancel()" class="edit">取消</el-button>
	    </el-form-item>
	  </el-form>
	</div>
	</div>
</template>
<script>
	export default { 
  data() {
   	return{
		// 表单对应的数据对象
		loginForm: {
			id:'',
			//账号
		    userAccount: '',
			//原密码
		    userPassword: '',
			//手机号
			userPhone: '',
			//新密码
			checkPass: '', 
		},
		// 表单校验规则  
		loginFormRules: {
		    userAccount: [
		        { required: true, message: '请输入账号', trigger: 'blur'},
		        { min: 5, max: 11, message: '请输入 5 到 11 个字符', trigger: 'blur'},
				
		    ],
		    userPassword: [
		        { required: true, message: '请输入密码', trigger: 'blur'},
		        { min: 6, max: 10, message: '请输入 6 到 10 个字符', trigger: 'blur'},
			
		    ],
			userPhone: [
			    { required: true, message: '请输入手机号', trigger: 'blur'},
			    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur'}
			],
			checkPass:[
				{ required: true, message: '请输入新密码', trigger: 'blur'},
				{ min: 6, max: 10, message: '请输入 6 到 10 个字符', trigger: 'blur'},
			]
		}
		}
    },
	 methods: {
			   //注册按钮
			   forgotpassword(loginFormRef){
				   this.$refs.loginFormRef.validate(async valid => {
					   if(!valid)
					               return this.$message.error('校验失败')
								     console.log(1,valid)
					    // 发注册请求
					          const {data : res}= await this.$http.post('/buy/customer/forgotPassword',this.loginForm)
							  const id=res.id
							  this.loginForm.userPassword=this.loginForm.checkPass
					     		   console.log(1,this.loginForm.checkPass)
								   if(!res){
									   console.log(res)
									   return this.$message.error("账号或手机号或密码有误")
								   }else{
									   const {data : res}= await this.$http.post
									   (`/buy/customer/upForgotPassword/${id}`,this.loginForm)
									   console.log(1,id)
									   if(res!=false)
									    this.$message.success('修改成功')
										 this.$router.push('/login')
								   }
					   })
			   },
			     // 重置按钮
			   resetForm() {
			   			this.$refs.loginFormRef.resetFields()
			   	},
				//取消按钮
			   cancel() {
			   			this.$router.push('/login');
			   },
			},
			}
</script>
<style  scoped>
	.a{
	    margin-left: 160px;
	    margin-top: 91px;
	    font-size: 36px;
	    color: #F56C6C;
	}
		#forgotpassword {
		  background-color: #2b4b6b;
		
		  background-repeat:  round;
		  height: 100%;
		}
		
		.login_box {
		    width: 472px;
		    height: 475px;
		  background-color: #fff;
		
		  /* 绝对居中 */
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  transform: translate(-50%, -50%);
		}
		
		.img_box {
		  border: 1px solid #eee;
		  border-radius: 50%;
		  width: 130px;
		  height: 130px;
		  padding: 10px;
		  box-shadow: 0 0 10px;
		  background-color: #fff;
		
		  position: absolute;
		  left: 50%;
		  transform: translate(-50%, -50%);
		
		  img {
		    border: 1px solid #eee;
		    border-radius: 50%;
		    width: 130px;
		    height: 130px;
		  }
		}
		
		.loginForm_box {
		    position: absolute;
		    bottom: 0px;
		    width: 100%;
		    padding: 0 20px;
		    /*宽度会包含边框*/
		    box-sizing: border-box;
		}
		
		.btns {
		    display: flex;
		    justify-content: end;
		}
		</style>	
</style>